<template>
  <FormView title="表单示例" :toolbar-attrs="{ buttons: ['back', 'slot'] }">
    <template #toolbar-button>
      <ToolbarButton
        icon="el-icon-remove-outline"
        :label="disabled ? '启用表单' : '禁用表单'"
        @click="disabled = !disabled" />
      <ToolbarButton icon="el-icon-loading" label="校验表单" @click="validForm" />
      <ToolbarButton icon="el-icon-magic-stick" label="清除校验" @click="clearValid" />
      <ToolbarButton
        icon="el-icon-magic-stick"
        :label="`表单${formRequired ? '' : '不'}必填`"
        @click="formRequired = !formRequired" />
    </template>
    <FyForm ref="tableForm" v-model="entity" :status.sync="disabled" :option="tableOption" />
  </FormView>
</template>

<script>
  import { tableOption } from '@/const/crud/personnel/education'
  import { scrollIntoRequiredField } from '@web-utils/core'
  export default {
    name: 'AvueFormTest',
    data() {
      return {
        tableOption,
        disabled: false,
        entity: {},
        formRequired: false
      }
    },
    methods: {
      async validForm() {
        try {
          const valid = await this.$refs.form.validate()
          if (valid) {
            this.$message.success('表单校验通过！')
          }
        } catch (e) {
          await scrollIntoRequiredField(this)
        }
      },
      clearValid() {
        this.$refs.form.clearValidate()
      }
    }
  }
</script>
